<template>
	<div>
		<div class="title">热销推荐2</div>
		<ul>
			<router-link tag="li" class="item border-bottom" 
      v-for="item of list" 
      v-bind:key="item.id" 
      v-bind:to="'/banner/' + item.id + item.title"
      
      > <!-- v-on:click.native="sendTitleInfo"不加.native之前无效，我也不知道为什么 -->
				<img class="item-img" v-bind:src="item.imgUrl">
				<div class="item-info">
					<p class="item-title" v-bind:thistitle="item.title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>	
				</div>
			</router-link>
		</ul>
	</div>
</template>
<script>

export default{
	name:'HomeWeekend',
	props: {
		list:Array
	},
  data () {
    return {
      
    }
  },
  methods:{
    //向不同的组件发送参数,先在main.js定义一个全局变量eventBus,然后我在Banner.vue那边接收
    // sendTitleInfo () {
      // const thistitle = this.index
      // eventBus.$emit('acceptTitleInfo')
    // }
  },
}	
</script>
<style lang="stylus" scoped>
  @import '~__STYLES__/mixins.styl'
  .title
    line-height: .8rem
    background: #eee
    text-indent: .2rem
  .item-img-wrapper
    overflow: hidden
    height: 0
    padding-bottom: 37.09%
    .item-img
      width: 100%
  .item-info
    padding: .1rem
    .item-title
      line-height: .54rem
      font-size: .32rem
      ellipsis()
    .item-desc
      line-height: .4rem
      color: #ccc
      ellipsis()
</style>